<template>
    <div class="menu-list" :class="{selected: curMenu === item}">
        <div @click="setCurMenu(item)" class="item-click">
            <i class="fa fa-list-ul" aria-hidden="true"></i>
            <span>{{item.name}}</span>
            <span v-show="!item.selected" class="tips"></span>
            <i v-show="curMenu === item" class="fa fa-pencil-square-o tips" aria-hidden="true"></i>
        </div>
        <div class="delete-btn" @click="deleteMenu(item)">
            <v-icon type="delete"></v-icon>
        </div>
    </div>
</template>
<script>
    const COMPONENT_NAME = 'menu-item';
    import { mapState } from 'vuex';

    export default {
        name: COMPONENT_NAME,
        data() {
            return {}
        },
        computed: {
            ...mapState([
                'curMenu',
            ]),
        },
        props: ['item'],
        methods: {
            setCurMenu(item) {
                if (this.curMenu != item) {
                    this.$store.dispatch('setCurMenu', { id: item.id, menu: item })
                }
            },
            deleteMenu(menu) {
                this.$modal.confirm({
                    title: '删除',
                    content: '您确认要删除这项菜单？',
                    onOk: () => {
                        this.$store.dispatch('deleteMenu', { menu: menu });
                        setTimeout(() => {
                            window.console.log('log', 3333);
                            location.reload();
                        }, 2000);
                    },
                    onCancel: () => {

                    }
                })
            }
        }
    }
</script>
<style lang="less">
    .menu-list {
        width: 100%;
        padding-left: 20px;
        cursor: pointer;
        position: relative;
        &:hover {
            background: #29A9FF;
            div {
                color: #fff;
            }
        }
        &.selected {
            background: #29A9FF;
            div {
                color: #fff;
            }
        }
        .item-click {
            margin-right: 40px;
            height: 38px;
            line-height: 38px;
            color: #333;
        }
        i {
            display: inline-block;
            height: 38px;
            line-height: 38px;
        }
        .tips {
            float: right;
        }

        .delete-btn {
            position: absolute;
            top: 0;
            right: 10px;
        }
    }
</style>
